<!-- 联系我们 -->
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'
import { useOffSetTopStore } from '@/stores/modules/offsetTop'

const formRef = ref(null)

const form = reactive({
  name: '',
  gender: '',
  phone: '',
  email: '',
  code: '',
  requirement: ''
})

const rules = {
  name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  requirement: [{ required: true, message: '请输入需求内容', trigger: 'blur' }]
}

const isCodeSending = ref(false)
const codeButtonText = ref('获取验证码')
let countdown = ref(60)
let timer = null

const getCode = () => {
  if (form.phone === '' || !/^1[3-9]\d{9}$/.test(form.phone)) {
    ElMessage.error('请先输入有效的联系电话')
    return
  }
  isCodeSending.value = true
  codeButtonText.value = `重新获取(${countdown.value}s)`

  timer = setInterval(() => {
    countdown.value--
    codeButtonText.value = `重新获取(${countdown.value}s)`
    if (countdown.value <= 0) {
      clearInterval(timer)
      countdown.value = 60
      codeButtonText.value = '获取验证码'
      isCodeSending.value = false
    }
  }, 1000)

  // 模拟发送验证码
  setTimeout(() => {
    ElMessage.success('验证码已发送')
  }, 500)
}

const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功, 我们的工作人员将尽快与您联系！')
      console.log('提交的数据:', form)
    } else {
      ElMessage.error('请填写完整表单')
    }
  })
}

const temRef = ref()
const offsetTop = ref(0)
const offsetTopStore = useOffSetTopStore()
const getOffSetTop = () => {
  offsetTop.value = temRef.value.offsetTop
  offsetTopStore.setOffSetTop('C', offsetTop.value)
}
onMounted(() => {
  getOffSetTop()
})
</script>

<template>
  <div ref="temRef" class="contact-us">
    <div class="wrapper anchor">
      <div class="form-container">
        <h1>立即免费获取报价</h1>
        <p>提交你的需求，我们将为您定制专属解决方案！</p>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
          <el-form-item label="联系人" prop="name">
            <el-input v-model="form.name" placeholder="联系人"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="性别">
              <el-option label="保密" value="secret"></el-option>
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="联系电话"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="邮箱"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code">
            <el-row>
              <el-col :span="14">
                <el-input v-model="form.code" placeholder="验证码"></el-input>
              </el-col>
              <el-col :span="10">
                <el-button
                  @click="getCode"
                  :disabled="isCodeSending"
                  class="get-code-button"
                  >{{ codeButtonText }}</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="需求内容" prop="requirement">
            <el-input
              type="textarea"
              v-model="form.requirement"
              placeholder="需求内容"
              class="requirement-input"
              rows="7"
              maxlength="350"
              show-word-limit
              resize="none"
            ></el-input>
          </el-form-item>

          <el-form-item class="submit-button-container">
            <el-button type="primary" @click="onSubmit" class="submit-button"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contact-us {
  background-color: #271a0e;
  // 因为可视窗口的放大缩小会改变网页大小，而这里依赖的父级宽度就是网页大小，会造成出现空白区域，所以需要设置一个最小宽度
  min-width: 1270px;
  height: 800px;
  background: url('https://images.unsplash.com/photo-1727769025237-8023e4fdcfeb?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
    no-repeat left / cover;
  ::-webkit-scrollbar {
    display: none;
  }
  .el-form {
    ::-webkit-scrollbar {
      display: block;
    }
  }
  .anchor {
    height: 800px;
    position: relative;
  }
  .form-container {
    position: absolute;
    bottom: 50px;
    left: 50px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); // 半透明背景
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    text-align: center;
    max-width: 400px;
    overflow: hidden;

    h1 {
      font-size: 30px;
      // margin-left: 10px;
      margin-bottom: 10px;
    }

    p {
      font-size: 14px;
      margin-bottom: 20px;
      color: #999;
    }

    .el-form {
      text-align: left;

      .el-form-item {
        margin-bottom: 20px;

        label {
          font-weight: bold;
        }

        .el-input__inner,
        .el-select,
        .el-textarea__inner {
          width: 100%;
          border-radius: 4px;
        }

        .el-input__inner,
        .el-select {
          height: 40px;
        }

        .el-textarea__inner {
          min-height: 250px;
          resize: vertical; // 允许垂直方向上调整大小
        }
      }

      .get-code-button {
        width: 100%;
        background-color: #ff4d4f;
        color: #fff;
        &:hover {
          background-color: #ff7875;
        }
      }

      .submit-button-container {
        display: flex;
        justify-content: center; // 提交按钮居中
      }

      .submit-button {
        width: 300px; // 设置按钮宽度，使其居中更好看
        height: 40px;
        background-color: #ff4d4f;
        color: #fff;
        font-size: 16px;
        &:hover {
          background-color: #ff7875;
        }
      }
    }
  }
}
</style>
